<template>
  <div class="right-steps">
    <div type="text" class="title">流程动态</div>
    <el-steps
      direction="vertical"
      finish-status="finish"
      :active="flowlogsList.length"
      process-status="finish"
    >
      <template v-for="(flowStep, index) in flowlogsList">
        <el-step :key="index">
          <template slot="icon">
            {{ index+1 }}
          </template>
          <template slot="title">
            <div>{{flowStep.state.state_name}}({{flowStep.transition.transition_name}})</div>
            <div style="font-size: 12px" v-html="getRecordDesc(flowStep)"></div>
          </template>
          <template slot="description">
            <bubble  v-if="flowStep.suggestion" :text="flowStep.suggestion"></bubble>
          </template>
        </el-step>
      </template>
    </el-steps>
  </div>
</template>
<script>
import workManagement from "@/api/workManagement/index";
import Bubble from "./bubble";
import eventBus from "@/utils/eventBus";
export default {
  components: { Bubble },
  props:["id"],
  data() {
    return {
      flowlogsList: [],
    };
  },
  created() {
    this.getFlowlogs();
    this.refreshData();
  },
  methods: {
    refreshData() {
      eventBus.$on("submitWork", () => {
        this.getFlowlogs();
      });
    },
    getRecordDesc(info) {
      let desc = `<span style="color: #bcbcbc"> ${info.participant_info.participant_alias} | ${info.gmt_created}</span>`;
      return desc;
    },
    getFlowlogs() {
      workManagement.getFlowlogs(this.id,{ per_page:100,page: 1}).then(res => {
          this.flowlogsList = res.data.value;
          if(this.flowlogsList)this.flowlogsList=this.flowlogsList.reverse()
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/element-variables.scss";
.title {
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
  margin-bottom: 20px;
  color: $--color-primary;
}
.number {
  font-size: 30px;
  font-weight: 700;
}

::v-deep.el-step {
  margin-bottom: 15px;
  .el-step__head{
    width: 50px;
    text-align: right;
  }
  .el-step__icon {
    font-weight: 700;
    font-size: 32px;
  }
  .el-step__icon.is-text {
    border: none;
    border-radius: 0%;
    border-bottom: #dbe0f9 5px solid;
  }
  .el-step__description {
    margin-left: 10px;
  }
  .el-step__line {
    width: 1px;
  }
}
::v-deep.el-step .el-step__description{
  margin-left: 0px;
}
</style>
